<template>
	<view class="container">
		<BackGround />

		<Header title="请选择您喜欢的风格" />

		<view class="searchBox row">
			<view class="searchBox-item flex1 center" @click="changeSex(1)">
				<view class="searchBox-item-sel-left" v-if="sex == 1"></view>
				<view class="text" :class="[sex == 1 ? 'searchBox-item-sel-left-text' : '']">女生</view>
			</view>
			<view class="searchBox-item flex1 center" @click="changeSex(2)">
				<view class="searchBox-item-sel-right" v-if="sex == 2"></view>
				<view class="text" :class="[sex == 2 ? 'searchBox-item-sel-right-text' : '']">男生</view>
			</view>
		</view>

		<view class="nav">
			<view class="nav-item center" v-for="(item, index) in navList" :key="index" @click="changeNav(item)">
				<image :src="item.images" mode="widthFix" class="nav-item-main-img"></image>

				<view class="nav-item-notSel center" v-if="currentNav != item.value">
					<image src="@/static/nav-item-notSel-bg.png" mode="widthFix" class="nav-item-notSel-bg"></image>
					<view class="text">{{ item.label }}</view>
				</view>

				<view class="nav-item-sel center" v-if="currentNav == item.value">
					<image src="@/static/nav-item-sel-bg.png" mode="widthFix" class="nav-item-sel"></image>
					<view class="text">{{ item.label }}</view>
				</view>
			</view>
		</view>

		<view class="productList">
			<view class="left">
				<view class="productItem" v-for="(item, index) in leftList" :key="index" @click="showDetail(item)">
					<image :src="item.image" mode="widthFix" class="mainImage"></image>
					<view class="maskLayer">
						<view class="maskLayer-con">
							<image src="/static/pro-mengceng.png" mode="widthFix" class="maskLayer-bg"></image>
							<view class="NumberPeople row">
								<text>{{ item.count }} 人</text>
								<image src="@/static/shoucang.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right">
				<view class="productItem" :class="{ productItem320: index == 0 }" v-for="(item, index) in rightList" :key="index" @click="showDetail(item)">
					<image :src="item.image" mode="widthFix" class="mainImage"></image>
					<view class="maskLayer">
						<view class="maskLayer-con">
							<image src="/static/pro-mengceng1.png" mode="widthFix" class="maskLayer-bg" v-if="index == 0"></image>
							<image src="/static/pro-mengceng.png" mode="widthFix" class="maskLayer-bg" v-if="index != 0"></image>
							<view class="NumberPeople row">
								<text>{{ item.count }} 人</text>
								<image src="@/static/shoucang.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<up-empty mode="list" v-if="!list.length"></up-empty>
		<!-- <uni-load-more :status="loadMoreStatus" v-if="list.length"></uni-load-more> -->

		<ProductDetail ref="productDetailRef" />
	</view>
</template>

<script setup>
import { http, page } from 'uview-plus';
import Header from '@/components/Header.vue';
import ProductDetail from '@/components/ProductDetail.vue';
import { random, guid } from 'uview-plus';
import { ref, getCurrentInstance } from 'vue';
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';

const { proxy } = getCurrentInstance();

const productDetailRef = ref(null);

const sex = ref(1);
const currentNav = ref(0);
const flowList = ref([]);
const navList = ref([]);

const leftList = ref([]);
const rightList = ref([]);
const list = ref([]);
const total = ref(0);
const pageNum = ref(1);
const loadMoreStatus = ref('more');

async function changeSex(val) {
	sex.value = val;
	getLabel();
}

async function changeNav(item) {
	currentNav.value = item.value;
	pageNum.value = 1;
	getList();
}

function searchValueChange() {
	pageNum.value = 1;
	getList();
}

function showDetail(row) {
	productDetailRef.value.init(row);
}

function splitArrayInterleaved(arr) {
	const arr1 = [];
	const arr2 = [];

	for (let i = 0; i < arr.length; i++) {
		if (i % 2 === 0) {
			arr1.push(arr[i]);
		} else {
			arr2.push(arr[i]);
		}
	}

	return [arr1, arr2];
}

onReachBottom(() => {
	if (list.value.length < total.value) {
		pageNum.value++;
		getList();
	}
});

onPullDownRefresh(() => {
	pageNum.value = 1;
	getList();
});

async function getList() {
	loadMoreStatus.value = 'loading';
	const res = await http.post(`/open/api/index/list?pageNum=${pageNum.value}&pageSize=10`, { labelId: currentNav.value });
	if (pageNum.value == 1) {
		leftList.value = [];
		rightList.value = [];
		list.value = res.rows;
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);

		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
		// list.value = list.value.concat(res.rows);
	} else {
		list.value = list.value.concat(res.rows);
	}

	const [arr1, arr2] = splitArrayInterleaved(list.value);

	leftList.value = leftList.value.concat(arr1);
	rightList.value = rightList.value.concat(arr2);

	loadMoreStatus.value = 'more';
	total.value = res.total;
	if (list.value.length >= total.value) {
		loadMoreStatus.value = 'noMore';
	}
	uni.stopPullDownRefresh();
}

async function getLabel() {
	const { data } = await http.get(`/open/api/index/getLabelAll/${sex.value}`, {});
	navList.value = data.map((item) => {
		return {
			label: item.name,
			value: item.id,
			images: item.images
		};
	});
	currentNav.value = navList.value[0].value;
	pageNum.value == 1;
	getList();
}

getLabel();
</script>

<style lang="scss">
.indexSearchBoxPla {
	font-size: 34rpx;
	color: #aeaeae;
	text-align: center;
}
</style>
<style lang="scss" scoped>
.searchBox {
	width: 91vw;
	height: 12vw;
	background: #ffffff;
	border-radius: 6vw 6vw 6vw 6vw;
	margin: 0 auto;
	position: relative;
	z-index: 10;

	.searchBox-item {
		width: 50%;
		text-align: center;
		line-height: 12vw;
		font-weight: bold;
		font-size: 4vw;
		color: #000000;
	}

	.text {
		position: relative;
		z-index: 20;
	}

	.searchBox-item-sel-left {
		position: absolute;
		width: 52vw;
		height: 12vw;
		background: #ffd000;
		border-radius: 6vw 6vw 6vw 6vw;
		left: 0;
		top: 0;
	}
	.searchBox-item-sel-left-text {
		position: relative;
		left: 3.25vw;
	}

	.searchBox-item-sel-right {
		position: absolute;
		width: 52vw;
		height: 12vw;
		background: #ffd000;
		border-radius: 6vw 6vw 6vw 6vw;
		right: 0;
		top: 0;
	}
	.searchBox-item-sel-right-text {
		position: relative;
		right: 3.25vw;
	}
}

.nav {
	margin-top: 3vw;
	display: flex;
	align-items: center;
	padding-left: 5vw;
	overflow-x: auto;

	&-item {
		width: 15vw;
		height: 15vw;
		border-radius: 15vw 15vw 15vw 15vw;
		margin-right: 3vw;
		overflow: hidden;
		position: relative;

		.nav-item-main-img {
			width: 100%;
		}

		.nav-item-notSel {
			position: absolute;
			width: 15vw;
			height: 15vw;
			border-radius: 50%;
			top: 0;
			left: 0;
			z-index: 10;

			image {
				position: absolute;
				width: 15vw;
				height: 15vw;
				border-radius: 50%;
				top: 0;
				left: 0;
				z-index: 11;
			}

			.text {
				position: relative;
				z-index: 12;
				font-weight: bold;
				font-size: 3vw;
				color: #ffffff;
			}
		}

		.nav-item-sel {
			position: absolute;
			width: 15vw;
			height: 15vw;
			border-radius: 50%;
			top: 0;
			left: 0;
			z-index: 10;

			image {
				position: absolute;
				width: 15vw;
				height: 15vw;
				border-radius: 50%;
				top: 0;
				left: 0;
				z-index: 11;
			}

			.text {
				position: relative;
				z-index: 12;
				font-weight: bold;
				font-size: 3vw;
				color: #000000;
			}
		}
	}
}

.productList {
	margin: 3vw 5vw 20vw;
	display: flex;
	justify-content: space-between;

	.productItem {
		width: 43vw;
		height: 56vw;
		border-radius: 6vw;
		overflow: hidden;
		position: relative;
		margin-bottom: 5vw;

		.mainImage {
			height: 100%;
		}

		.maskLayer {
			width: 100%;
			height: 100%;
			position: absolute;
			bottom: 0;
			left: 0;

			.maskLayer-con {
				position: relative;
				width: 100%;
				height: 100%;
			}

			.maskLayer-bg {
				width: 100%;
				height: 100%;
				position: absolute;
				bottom: -0.3vw;
				left: 0;
			}

			.NumberPeople {
				position: absolute;
				bottom: 3vw;
				left: 4vw;
				z-index: 1;

				text {
					font-size: 3vw;
					color: #000000;
				}

				image {
					width: 4vw;
					height: 3vw;
					margin-left: 3vw;
				}
			}
		}
	}

	.right {
		.productItem320 {
			height: 320rpx;
			.maskLayer-bg {
				height: 320rpx !important;
			}
		}
	}
}
</style>
